<template>
  <div id="login-main">
    <div class="login-bg-container">
      <img id="login-bg" class="login-bg" src="@/assets/img/web_log.jpg">
    </div>
    <div class="login-context-container">
      <div id="login-title-container" class="login-title-container">
        <div id="login-title" class="login-title">公租通后台管理系统</div>
      </div>
      <div id="login-frame-bg" class="login-frame"></div>
      <div id="login-frame" class="login-frame">
        <div id="login-log" class="login-log">登录</div>
        <div id="login-way" class="login-way">
          <div class="login-frame-container">
            <!--给个容器，使文字居中-->
            <div id="username" class="username" style="padding-top: 20px;">
              <p class="login-characters" style="letter-spacing: calc((60px - 4ch) / 3);">手机号：</p>
              <el-input placeholder="请输入手机号" size="small" v-model="phone" clearable
                        style="width:200px;"></el-input>
            </div>
            <div id="password" class="password" style="padding-top: 50px;">
              <p class="login-characters" style="letter-spacing: calc((60px - 3ch) / 2);">密码：</p>
              <el-input placeholder="请输入密码" autocomplete="new-password" size="small" v-model="password" clearable style="width:200px;"
                        show-password></el-input>
            </div>
            <div class="login-button">
              <el-button type="primary" style="width: 150px;" round @click="handleLogin">登录</el-button>
              <div class="login-error-message" id="error-message">{{errorMessage}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  import {login} from "./loginJs";
  import {removeToken} from "../../assets/js/auth";

  export default {
    name: "Login",
    data() {
      return {
        phone: '',//手机号
        password: '',//密码
        errorMessage: '',//错误信息显示
      };

    },
    methods: {

      // 登录
      handleLogin() {
        const _this = this;
        //将登陆条件放在对象中
        const managerUser = {
          "phone": _this.phone,
          "password": _this.password
        }

        // 使用封装方法发送请求
        login(managerUser).then(res => {
          if (res.code === '200') {
            this.$message({
              message: '登录成功',
              type: 'success'
            });
            sessionStorage.setItem('token', res.data.token);
            sessionStorage.setItem('position', res.data.position);
            let logTime = res.data.logTime;

            if (logTime === 'null') {
              // 第一次登录
              logTime = "one"
            }
            // 将登录时间信息保存到session域中
            sessionStorage.setItem('logTime',logTime)

            // 跳转并将时间信息带过去
            this.$router.push('/framework');
          } else {
            removeToken()
            this.$message.error(res.msg);
            _this.errorMessage = res.msg;
          }
        }).catch(() => {
          removeToken()
          _this.errorMessage = '系统出错了'
        })
        //       //发送post请求，验证登录信息
        //       _this.$axios.post('managerUser/login', managerUser).then(res => {
        //         //如果显示结果正确，则表示允许登录
        //         if (res.data.code === '200') {
        //           // 将token保存到网页
        //           sessionStorage.setItem("token",res.data.data.token)
        //
        //           var logTime = res.data.data.logTime;
        //
        //           if(logTime === null){
        //             // 第一次登录
        //             logTime = "您当前为首次登录！"
        //           }
        //
        //           // 跳转并将时间信息带过去
        //           this.$router.push({
        //             path: '/framework',
        //             query: {
        //               data: res.data.data.logTime
        //             }
        //           });
        //         }
        //         if (res.data.code === '201') {
        //           _this.errorMessage = "用户名或密码错误，请重试！"
        //         }
        //       }).catch(error => {
        //         console.log("出错了!", error)
        //         _this.errorMessage = "系统出错了！"
        //       })
        //     }
      }
    }
  }

</script>

<style>
  /*设置主容器的长宽*/
  #login-main {
    position: absolute;
    width: 99%;
    height: 99%;
  }

  .login-bg-container {
    z-index:1;
    position: absolute;
    width: 100%;
    height: 100%;
  }

  /*设置背景图片的格式*/
  #login-bg {
    filter: blur(1px);
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .login-context-container{
    z-index:2;
    position: absolute;
    width: 100%;
    height: 100%;
  }

  /*设置标题容器*/
  #login-title-container {
    z-index: 2;
    display: block;
    position: relative;
    width: 450px;
    height: 65px;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /*设置标题样式*/
  #login-title {
    position: relative; /*设置位置关系为相对关系*/
    font-size: 50px; /*设置字体大小为50px*/
    font-family: 华文楷体; /*设置字体为华文楷体*/
    font-weight: bold; /*设置字体加粗*/
    text-align: center; /*设置水平居中*/
  }

  /*设置磨砂背景*/
  #login-frame-bg {
    z-index: 998;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /*设置移动距离为自身的一半，保持居中*/
    background-color: rgba(173, 216, 230, 0.7); /* 使用 rgba 表示颜色，设置透明度为 0.5 */
    width: 450px;
    height: 400px;
    filter: blur(2px);
  }

  /*设置内容，只有分开才能做到两个效果（一个清晰，一个模糊*/
  .login-frame {
    z-index: 999;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /*设置移动距离为自身的一半，保持居中*/
    width: 430px;
    height: 400px;
  }

  /*设置登录字体样式*/
  #login-log {
    text-align: center;
    font-size: 30px;
    padding-top: 40px;
    font-family: 正楷;
    font-weight: bold;
  }

  /*使表单元素居中显示*/
  .login-frame-container {
    position: relative;
    left: 40px;
    padding-top: 40px;
    width: 350px;
    height: 250px;
  }

  /*设置文字统一样式*/
  .login-characters {
    width: 60px;
    text-align: justify;
    white-space: nowrap;
    display: inline;
  }

  /*登录按钮*/
  .login-button {
    padding-left: 100px;
    padding-top: 60px;
  }

  /*错误提示语*/
  .login-error-message {
    font-size: 12px;
    color: red;
  }
</style>
